<template>
  <div id="main" ref="main" style="height: 600px;"></div>
</template>
  
<script setup lang='ts'>
import { ref, onMounted, watch } from 'vue'
// 地图的使用要复杂一些，需要一个 地图josn数据
// @ts-ignore
// import guagndong from '@/json/guangdong.json';
// @ts-ignore
import china from '@/json/china2.json';
import * as echarts from 'echarts'
const main = ref<HTMLElement | null>(null);
let myChart: echarts.ECharts;
onMounted(() => {
  myChart = echarts.init(main.value);
  // myChart?.setOption(option);
})
// 还要把地图数据进行注册
// echarts.registerMap('GD', guagndong);
echarts.registerMap('CHINA', china);

let option: echarts.EChartsOption = {
  title: {
    text: 'Population Density of Hong Kong （2011）',
    subtext: 'Data from Wikipedia',
    sublink:
      'http://zh.wikipedia.org/wiki/%E9%A6%99%E6%B8%AF%E8%A1%8C%E6%94%BF%E5%8D%80%E5%8A%83#cite_note-12'
  },
  tooltip: {
    trigger: 'item',
    formatter: '{b}<br/>{c}',
    backgroundColor: 'rgba(0,0,0,.3)'
  },

  visualMap: {
    min: 0,
    max: 1000000,
    text: ['High', 'Low'],
    realtime: false,
    calculable: true,
    inRange: {
      color: ['white', 'green', 'yellow', 'orange', 'red']
    }
  },
  series: [
    {
      name: '香港18区人口密度',
      type: 'map',
      // 指定你要注册的哪个地图数据
      map: 'CHINA',
      data: [],
      emphasis: {
        label: {
          show: false,
        }
      }
    }
  ]
}

const props = defineProps<{ data: SaleMap[] }>()

watch(() => props.data.length, () => {
  const data = props.data.map(item => ({
    name: item.areaName,
    value: item.saleNum
  }))
  // @ts-ignore
  option.series[0].data = data
  myChart.setOption(option)
})


</script>
  
<style></style>